<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>天气</title>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<style>
			*{padding: 0; margin: 0;}
			#app{
				position: relative;
			}
			.weather_dl{
				width: 80px;
				color: #f00;
				font-weight: bold;
			}
			.weather_dl dt {
				display: flex;
				justify-content: flex-start;			
				align-items: center;
			}
			.weather_dl dt img{
				width: 20%;
				margin-right: 4px;
			}
			.weather_dl dt i{
				font-style: normal;
				font-size: 12px;
			}
			.weather_dl dd{
				font-size: 12px;
			}
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<dl class="weather_dl">
				<dt><img :src="weater_img" :alt="type"><i>{{type}}</i></dt>
				<dd>{{temperature}}</dd>
			</dl>
		</div>
		
		<script src="../../js/vue-resource.js"></script>
		<script>
			
			
			mui.plusReady(function() {
				
				var vm =new Vue({
					el:'#app',
					data:{
						//天气用的
						temperature:null,
						wind:null,
						weater_img:"",//图片
						type:"",
					},
					methods:{
						get_weater() {//获取天气!
							this.$http.get('http://t.weather.sojson.com/api/weather/city/101090301')
								.then(function(res) {
									if (res.status == 200) {
										var data = res.data;
										// console.log(JSON.stringify(res.data))
										var high = data['data']['forecast'][0]['high'].replace('高温 ', ''); //高温
										var low = data['data']['forecast'][0]['low'].replace('低温 ', ''); //低温
										var fl = data['data']['forecast'][0]['fl']; //风力
										var fx=data['data']['forecast'][0]['fx'];
										var type = data['data']['forecast'][0]['type']; //天气类型（阴晴雨雪等）
										// type = type.substr(type.length - 1, 1);
										this.type=type;
										this.temperature = high + '~' + low;
										this.wind =fx+fl;
										if (type == '大雪') { 
											this.weater_img = '../../images/weather-daxue01.png';
										} else if (type == '大雨') {
											this.weater_img = '../../images/weather-dayu01.png';
										} else if (type == '多云') {
											this.weater_img = '../../images/weather-duoyun01.png';
										} else if (type == '雷阵雨') {
											this.weater_img = '../../images/weather-leizhenyu01.png';
										} else if (type == '晴') {
											this.weater_img = '../../images/weather-qing01.png';
										} else if (type == '小雪') {
											this.weater_img = '../../images/weather-xiaoxue01.png';
										} else if (type == '小雨') {
											this.weater_img = '../../images/weather-xiaoyu01.png';
										} else if (type == '阴') {
											this.weater_img = '../../images/weather-yin01.png';
										} else if (type == '中雪') {
											this.weater_img = '../../images/weather-zhongxue01.png';
										} else if (type == '中雨') {
											this.weater_img = '../../images/weather-zhongyu01.png';
										}
									}
								})
						}
					},
					created(){
						this.get_weater();
					}
				})
			});
		</script>
	</body>
</html>
